<template>
  <div class="forget">
    <header-v title="忘记密码"></header-v>
    <Content>
      <Row
        style="margin-bottom:50px"
        type="flex"
        justify="center"
      >
        <Col
          :lg="{span:21,offset:3}"
          :xs="{span:24}"
        >
        <Steps :current="current">
          <Step
            title="第一步"
            content="身份验证"
          ></Step>
          <Step
            title="第二步"
            content="充值密码"
          ></Step>
          <Step
            title="第三步"
            content="完成"
          ></Step>
        </Steps>
        <!-- <Button type="primary" @click="next">Next step</Button> -->
        </Col>
      </Row>
      <Row
        v-if="current == 0"
        style="margin-bottom:50px"
        type="flex"
        justify="center"
      >
        <Col
          :xs="{span:24}"
          :lg="8"
        >
        <Form
          :model="formItemSf"
          label-position="right"
          :label-width="100"
        >
          <FormItem label="邮箱">
            <Input v-model="formItemSf.input1">
            </Input>
          </FormItem>
          <FormItem label="验证码">
            <Input v-model="formItemSf.input2">
            </Input>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              @click="next(1)"
            >确定</Button>
          </FormItem>
        </Form>
        </Col>
      </Row>
      <Row
        v-if="current == 1"
        style="margin-bottom:50px"
        type="flex"
        justify="center"
      >
        <Col
          :xs="{span:24}"
          :lg="8"
        >
        <Form
          :model="formItemSf"
          label-position="right"
          :label-width="100"
        >
          <FormItem label="新密码">
            <Input v-model="formItemSf.input3">
            </Input>
          </FormItem>
          <FormItem label="确认密码">
            <Input v-model="formItemSf.input4">
            </Input>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              @click="next(2)"
            >确定</Button>
          </FormItem>
        </Form>
        </Col>
      </Row>
      <Row
        v-if="current == 2"
        style="margin-bottom:50px"
        type="flex"
        justify="center"
      >
        <Col
          :xs="{span:24}"
          :lg="8"
        >
        <Card
          :bordered="false"
          style="background:#5b84ac;text-align:center;height:260px;line-height:120px"
        >
          <Icon
            type="md-checkmark-circle-outline"
            color="#fff"
            size="100"
          />
          <p style="color:#fff">设置成功快去登陆把</p>
        </Card>
        </Col>
      </Row>
    </Content>
    <footer-v></footer-v>
  </div>
</template>

<script>
import HeaderV from '../../components/login/main_header'
import FooterV from '../../components/login/main_footer'
export default {
  components: {
    HeaderV,
    FooterV
  },
  data() {
    return {
      current: 0,
      formItemSf: {
        input1: "",
        input2: "",
        input3: "",
        input4: ""
      }
    };
  },
  methods: {
    next(type) {
      if (type == 2) {
        this.current += 1;
        setTimeout(() => {
          this.$router.push({
            name: "login"
          });
        }, 3000);
      } else {
        this.current += 1;
      }
    }
  }
};
</script>

<style lang="less">
.forget {
  .ivu-layout-header {
    height: auto;
    line-height: initial;
    background: #fff;
    padding: 40px 0;
    img {
      vertical-align: middle;
      margin-right: 20px;
    }
    span {
      font-size: 30px;
      font-weight: bold;
    }
  }
  .ivu-layout-footer {
    p {
      text-align: center;
      font-weight: bold;
    }
  }
  .ivu-form-item-content {
    @media screen and (max-width: 500px) {
      background: yellow;
    }
  }
}
</style>